<template>
  <div>
    <div class="foryou-box">
      <div class="foryou-title">为你推荐</div>
      <ul>
        <li v-for="v in arr" :key="v.id" @click="goDetail(v.id)">
          <img class="artists" :src="v.posterUrl" />
          <div class="name">{{v.name}}</div>
          <div class="shopName">{{v.shopName}}</div>
          <div class="showTimeRange">{{v.showTimeRange}}</div>
          <div class="lowestPrice">
            <i class="iconfont icon-ziyuanldpi"></i>
            <span>{{v.lowestPrice}}</span>起
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import getLink from '@/api/getLink.js'
export default {
  data() {
    return {
      arr: []
    }
  },
  created() {
    getLink('/apidl/show/foryou').then(res => {
      this.arr = res.data
    })
  },
  methods: {
    goDetail(foryouNum) {
      this.$router.push({
        path: '/foryouDetail',
        query: {
          id: foryouNum
        }
      })
    }
  }
}
</script>
<style scoped>
.foryou-box {
  width: 90%;
  margin: auto;
}
.foryou-title {
  font-size: 0.44rem;
  font-weight: bold;
  margin: 0.2rem auto;
}
ul {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
li {
  width: 48%;
  border: 0.02rem solid gray;
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
  overflow: hidden;
}
li img {
  width: 100%;
  border-radius: 0.2rem;
  margin-top: 0.1rem;
}
li .name {
  font-weight: bold;
  margin: 0.1rem;
  font-size: 0.34rem;
}
li .shopName {
  font-weight: bold;
  font-size: 0.34rem;
  margin: 0.1rem;
}
li .showTimeRange {
  color: rgb(153, 153, 153);
}
li .lowestPrice {
  color: red;
  margin: 0.1rem 0 0 0.1rem;
}
li .lowestPrice span {
  font-size: 0.34rem;
  padding: 0.06rem;
}
</style>